<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery关系节点查找</title>
</head>
<body>
    <div class="d1">
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        <p>段落5</p>
    </div>
    <div>
        <input type="button" value="添加元素">
        <input type="button" value="删除元素">
    </div>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/mock-min.js"></script>
    <script src="../lesson13/data.js"></script>
    <script>
        console.log($(".d1").find("p").eq(1).text());
        console.log($(".d1 p").last().text());
        console.log($(".d1 p").first().next().next().prev().text());
        console.log($(".d1 p").first().nextAll().css("color","red"));

        $("[value=添加元素]").click(function(){
            // $(".d1").append("<p>增加元素</p>");
            // $(".d1").prepend("<p>增加元素</p>");
            // $(".d1>p:eq(2)").after("<p>增加元素</p>");
            $(".d1>p:eq(2)").before("<p>增加元素</p>");
            
        });
        $("[value=删除元素]").click(async function(){
            // 删除整个元素
            // $(".d1").remove();
            // 清空元素内部的子元素
            // $(".d1").empty();
            let res = await new Promise(function(resolve){
                $.ajax({
                    type:"post",
                    url:"/findStudents",
                    data:{type:""},
                    success(res){
                        resolve(res);
                    }
                })
                
            });
            console.log(res);
        });
    </script>
</body>
</html>